<template>
  <div class="leftblock-bg-box">
    <div class="leftblock-container" :style="{ background: getColor }">
      <img
        class="school-day-logo"
        src="https://tyut-calendar.oss-accelerate.aliyuncs.com/newimg/school_day_logo_new.png"
        alt=""
      />
      <div class="leftblock-big-font">
        <slot><b>太理 ·</b> 一百二十周年</slot>
      </div>
      <div class="leftblock-small-font">
        传承初心 &nbsp;&nbsp;&nbsp; 续写华章
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "LeftBlock",
  props: {
    activeColor: String,
  },
  mounted() {
    const bgColorArray = [
      [1, "rgba(37,62,130,0.9)"],
      [2, "rgba(192,72,81,0.9)"],
      [3, "rgba(235,180,113,0.7)"],
    ];
    const map = new Map(bgColorArray);
    let index = this.$store.state.ruler.index;
    this.$store.commit("ruler/colorChange", map.get(index));
  },
  computed: {
    ...mapState({
      navColor: (state) => state.ruler.activeColor,
      rulerIndex: (state) => state.ruler.index,
    }),
    rulerIndexMap() {
      return this.rulerIndex;
    },
    getColor: function () {
      return this.navColor ? this.navColor : this.activeColor;
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.school-day-logo {
  .to-center-ab();
  top: (30px+68px) * @to-px;
}
.leftblock-container {
  position: relative;
  height: 100vh;
  width: 380px * @to-px;
  background: rgba(172, 37, 43, 0.9);
  transition: all 0.75s;
}
.leftblock-big-font {
  b {
    font-size: 50px * @to-px;
  }
  .to-center-ab();
  font-size: 40px * @to-px;
  font-family: "Hanuman";
  text-align: center;
  line-height: 68px * @to-px;
  color: white;
  width: 50px;
}
.leftblock-small-font {
  .to-center-ab();
  left: 75%;
  font-size: 32px * @to-px;
  font-weight: 300;
  line-height: 44px * @to-px;
  color: white;
  width: 30px;
}
@media screen and (min-width: 480px) and (max-width: 868px) {
  .leftblock-container {
    width: 24vw;
  }
}
@media screen and (max-width: 480px) {
  .school-day-logo {
    left: 0px;
    top: 0px;
    transform: scale(0.5);
  }
  .leftblock-container {
    position: relative;
    height: 180px;
    width: 100%;
    background: rgba(172, 37, 43, 0.9);
  }
  .leftblock-big-font {
    b {
      font-size: 8vw;
    }
    top: 45%;
    font-size: 6vw;
    width: 100%;
  }
  .leftblock-small-font {
    font-size: 6vw;
    width: 100%;
    left: 75%;
    top: 75%;
  }
}
</style>
